@graphiql/react

What is @graphiql/react?

@graphiql/react is a React component library for building GraphiQL interfaces. It provides a set of React components that can be used to create a GraphQL IDE within your React application, allowing for easy querying, mutation, and schema exploration.

What are @graphiql/react's main functionalities?

GraphiQL Component

This code demonstrates how to use the GraphiQL component from @graphiql/react to create a GraphQL IDE within a React application. The fetcher function is used to send GraphQL queries to a specified endpoint.

import React from 'react';
import { GraphiQL } from '@graphiql/react';
import '@graphiql/react/dist/style.css';

const App = () => (
  <div style={{ height: '100vh' }}>
    <GraphiQL fetcher={async graphQLParams => {
      const data = await fetch('https://my-graphql-endpoint.com/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(graphQLParams),
      });
      return data.json();
    }} />
  </div>
);

export default App;

Custom Toolbar

This code demonstrates how to add a custom toolbar button to the GraphiQL interface. The CustomToolbar component includes a ToolbarButton that triggers an alert when clicked.

import React from 'react';
import { GraphiQL, ToolbarButton } from '@graphiql/react';
import '@graphiql/react/dist/style.css';

const CustomToolbar = () => (
  <GraphiQL.Toolbar>
    <ToolbarButton onClick={() => alert('Custom Button Clicked!')} title="Custom Button" />
  </GraphiQL.Toolbar>
);

const App = () => (
  <div style={{ height: '100vh' }}>
    <GraphiQL fetcher={async graphQLParams => {
      const data = await fetch('https://my-graphql-endpoint.com/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(graphQLParams),
      });
      return data.json();
    }}>
      <CustomToolbar />
    </GraphiQL>
  </div>
);

export default App;

Custom Query Editor

This code demonstrates how to use a custom query editor within the GraphiQL interface. The CustomQueryEditor component initializes the query editor with a default query and logs any changes to the console.

import React from 'react';
import { GraphiQL, QueryEditor } from '@graphiql/react';
import '@graphiql/react/dist/style.css';

const CustomQueryEditor = () => (
  <QueryEditor value="{ hello }" onEdit={newQuery => console.log(newQuery)} />
);

const App = () => (
  <div style={{ height: '100vh' }}>
    <GraphiQL fetcher={async graphQLParams => {
      const data = await fetch('https://my-graphql-endpoint.com/graphql', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(graphQLParams),
      });
      return data.json();
    }}>
      <CustomQueryEditor />
    </GraphiQL>
  </div>
);

export default App;

Other packages similar to @graphiql/react

graphiql

GraphiQL is the original GraphQL IDE created by the GraphQL Foundation. It provides a web-based interface for exploring GraphQL queries and mutations. While @graphiql/react is a React component library, graphiql is a standalone application that can be embedded in web applications.

altair

Altair is a feature-rich GraphQL client that provides a web-based interface for testing and exploring GraphQL queries. It offers features like query history, variable extraction, and more. Unlike @graphiql/react, Altair is not a React component library but a standalone application.

apollo-client-devtools

Apollo Client Devtools is a browser extension for Chrome and Firefox that provides a GraphQL IDE for Apollo Client. It allows developers to inspect queries, mutations, and the Apollo Client cache. Unlike @graphiql/react, it is not a React component library but a browser extension.

README

Changelog | API Docs | NPM

A react SDK for building graphql developer experiences for the web

Used by graphiql@2 and beyond!

(docs coming soon!)